import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

class GoodsMList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 102,
            isOnly: true,
            style: {
                marginTop: '10px'
            },
            modStyle: {
                marginBottom: '5px'
            },
            dataset: {},
            layout: '',
            artLayout: 'row',
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, modStyle, dataset, layout, artLayout} = data;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'goodsMListWrap cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className={layout == 'single' ? 'gModList gModList_single' : 'gModList'}>
                    {
                        (
                            dataset && dataset.length > 0 ?
                                dataset.map(function (item, index) {
                                    return (
                                        item.type == 'article' ?
                                            <div className="gModList__mod gModList__mod_art"
                                                 key={'gModList__mod__' + index} style={modStyle}>
                                                <div className="gModList__title">{item.title}</div>
                                                <div
                                                    className={artLayout == 'column' ? "artList artList_column" : "artList"}>
                                                    {
                                                        item.goodsList.map(function (goods, index) {
                                                            return (
                                                                artLayout == 'column' ?
                                                                    <div className="artList__item_column"
                                                                         key={'artList__item_column' + goods.artId}>
                                                                        <img src={goods.imageUrl} alt=""
                                                                             className="artList__item__img"/>
                                                                        <div className="artList__item__info">
                                                                            <div
                                                                                className="artList__item__title">{goods.title}</div>
                                                                            <div className="artList__item__bInfo">
                                                                                <div
                                                                                    className="artList__item__amountWrap">
                                                                                    <div
                                                                                        className="artList__item__pageView">
                                                                                        <span
                                                                                            className="artList__item__pageView__icon"></span>
                                                                                        <span
                                                                                            className="artList__item__pageView__text">{goods.pageView}</span>
                                                                                    </div>
                                                                                </div>
                                                                                <div
                                                                                    className="artList__item__time">{goods.createTime}</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    :
                                                                    <div className="artList__item"
                                                                         key={'artList__item' + goods.artId}>
                                                                        <div className="artList__item__info">
                                                                            <div
                                                                                className="artList__item__title">{goods.title}</div>
                                                                            <div className="artList__item__bInfo">
                                                                                <div
                                                                                    className="artList__item__pageView">
                                                                                    <span
                                                                                        className="artList__item__pageView__icon"></span>
                                                                                    <span
                                                                                        className="artList__item__pageView__text">{goods.pageView}</span>
                                                                                </div>

                                                                                <div
                                                                                    className="artList__item__time">{goods.createTime}</div>
                                                                            </div>
                                                                        </div>
                                                                        <img src={goods.imageUrl} alt=""
                                                                             className="artList__item__img"/>
                                                                    </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                            :
                                            (item.type == 'video' ?
                                                    (
                                                        <div className="gModList__mod" key={'gModList__mod__' + index}>
                                                            <div className="gModList__title">{item.title}</div>
                                                            <div className="videoList">
                                                                {
                                                                    item.goodsList.map(function (video, index) {
                                                                        return (
                                                                            <div className="videoItem"
                                                                                 key={'gModList__item__' + (video.artId || index)}>
                                                                                <div className="videoItem__imgWrap">
                                                                                    <img src={video.imageUrl} alt=""
                                                                                         className="videoItem__img"/>
                                                                                </div>
                                                                                <div className="videoItem__titles">
                                                                                    <div
                                                                                        className="videoItem__title">{video.title}</div>
                                                                                </div>
                                                                            </div>
                                                                        )
                                                                    })
                                                                }
                                                            </div>
                                                        </div>
                                                    )
                                                    :
                                                    (
                                                        <div className="gModList__mod" key={'gModList__mod__' + index}
                                                             style={modStyle}>
                                                            <div className="gModList__title">{item.title}</div>
                                                            <div className="gModList__list">
                                                                {
                                                                    item.goodsList.map(function (goods, index) {
                                                                        return (
                                                                            <div className="gModList__item"
                                                                                 key={'gModList__item__' + (goods.goodsId || index)}>
                                                                                <div
                                                                                    className="gModList__item__imgWrap">
                                                                                    <img className="gModList__item__img"
                                                                                         src={goods.imageUrl}/>
                                                                                </div>
                                                                                <div className="gModList__item__info">
                                                                                    <div
                                                                                        className="gModList__item__name">{goods.name}</div>
                                                                                    <div
                                                                                        className="gModList__item__price">
                                                                <span
                                                                    className="gModList__item__price__unit">￥</span>{goods.salePrice}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        )
                                                                    })
                                                                }
                                                            </div>
                                                        </div>
                                                    )
                                            )
                                    );
                                })
                                :
                                <div className="gModList__mod">
                                    <div className="gModList__title">商品模块名称</div>
                                    <div className="gModList__list gModList__list_empty">
                                        还没有配置数据哦~
                                    </div>
                                </div>
                        )
                    }
                </div>
            </div>
        );
    }
}

export default GoodsMList;
